<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo04</title>
</head>
<body>
<button id="openBtn">打开图片</button>
<button id="saveBtn">保存文件</button>
<button id="messageBtn">弹出对话框</button>
<img id="images" style="width: 100%"/>
<script>
    // 引入
    const {remote} = require('electron');
    const fs = require('fs');

    /* 打开图片 */
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function (e) {
        // 要注意dialog是主线程里的，所以要用remote，这里require的electron中并没有electron
        remote.dialog.showOpenDialog({
            title: '请选择图片哦',
            defaultPath: 'pic.png',
            filters: [{name: 'img', extensions: ['png']}],
            buttonLabel: '用了buttonLabel设置' // 这个设置的是选择后点的那个"打开"按钮'
        }).then((result) => {   // 这里用的是异步方法，所以要用.then
            let images = document.getElementById('images');
            // result.filePath是打开的文件的绝对路径的数组
            images.setAttribute('src', result.filePaths[0]);
        }).catch((err) => {
            console.log(err);
        });
    };

    /* 保存图片 */
    let saveBtn = document.getElementById('saveBtn');
    saveBtn.onclick = (e) => {
        remote.dialog.showSaveDialog({
            title: '保存文件'
        }).then((result) => {
            console.log('result:', result);
            /*
            * dialog的这个只是打开一个文件保存窗口
            * 保存后会返回一个用户选择的路径
            * 然后fs才是真正在该路径写入文件
            * */
            fs.writeFileSync(result.filePath, '文件内容');
        }).catch((err) => {
            console.log(err);
        });
    };

    /* 弹出对话框 */
    let messageBtn = document.getElementById('messageBtn');
    messageBtn.onclick = (e) => {
        remote.dialog.showMessageBox({
            type: 'warning',
            title: '去不去由你',
            message: '不去也得去',
            buttons: ['我去', '我请客'], // 选项数组
        }).then((result) => {
            // 返回的信息是数组中的下标
            console.log("result", result);
        });
    };
</script>
</body>
</html>